<template>
	<div class="check-org">
		<header class="nav">
			<img :src="store.state.tenant.blue_logo_url" />
			<div class="check-org-lang">
				<a-dropdown
					trigger="click"
					placement="bottomRight"
					style="float: right"
				>
					<span class="lang-active" @click.prevent>
						<i class="low-code iconsupplier_web_normal lang-icon"></i>
						{{ currentValue.name }}
						<i class="low-code iconxiangyou1 lang-icon"></i>
					</span>
					<template #overlay>
						<div class="lang-list">
							<span
								v-for="(lang, index) in language"
								:key="index"
								class="lang-list-item"
								:class="{ active: lang.value === currentValue.value }"
								@click="changeLocale(lang)"
								>{{ lang.name }}</span
							>
						</div>
					</template>
				</a-dropdown>
			</div>
		</header>
		<main class="org-list">
			<h1 class="org-list-title">选择登陆组织</h1>
			<p class="org-list-describe">
				当前共有{{ outsideOrgList.length }}个组织，请选择您要登录的组织
			</p>
			<ul>
				<li v-for="item in outsideOrgList" @click="changeOutsideOrg(item)">
					<p>
						<span class="label">{{ item.dept_type_name }}</span>
						<span class="org-name">{{ item.dept_name }}</span>
					</p>
					<p class="org-id">ID：{{ item.dept_id }}</p>
				</li>
			</ul>
		</main>
	</div>
</template>

<script setup lang="ts">
import { apiInit } from '@/services'
import { ref, onMounted, reactive, computed } from 'vue'
import { useStore } from 'vuex'
const props = defineProps(['outsideOrgList'])
const store = useStore()
const api = apiInit()
const emits = defineEmits(['enterHome'])
const language = computed(
	() =>
		store.state.tenant?.language_list?.filter((item: any) => item.has_show) ??
		[]
)
const currentValue = reactive({
	name: '中文',
	value: 'zh-CN',
})
const isShowLang = ref(false)
const changeLocale = (lang: any) => {
	currentValue.name = lang.name
	currentValue.value = lang.value
	isShowLang.value = false
	localStorage.setItem('locale', lang.value)
	location.reload()
}
const changeOutsideOrg = async (detail: any) => {
	let { code, msg } =
		await api.baseAuto.SwitchDeptExternalEmployeePrivateV1POST({
			query: { employeeId: detail.employee_id },
		})
	emits('enterHome', code, msg, detail, 'pc')
}
</script>
<style scoped lang="less">
.check-org {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	.nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 64px;
		background: #ffffff;
		padding-right: 28px;
		padding-left: 28px;
		box-sizing: border-box;
		img {
			max-width: 154px;
			max-height: 28px;
			float: left;
		}
	}
	.org-list {
		width: 500px;
		padding: 50px;
		padding-bottom: 38px;
		background: #ffffff;
		box-shadow: 0px 10px 10px rgba(186, 197, 227, 0.3);
		border-radius: 8px;
		max-height: 80vh;
		overflow-y: auto;
		&-title {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 24px;
			line-height: 18px;
			color: #1f2329;
			margin-bottom: 16px;
		}
		&-describe {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 18px;
			color: #646a73;
			margin-bottom: 24px;
		}
		ul {
			list-style: none;
			padding: 0;
			li {
				height: 66px;
				width: 100%;
				background: #ffffff;
				border: 1px solid #e8eaed;
				border-radius: 4px;
				padding: 12px;
				margin-bottom: 12px;
				cursor: pointer;
				user-select: none;
				p {
					margin-bottom: 0;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					.label {
						display: inline-block;
						height: 20px;
						background: #ebf1ff;
						border: 1px solid #4c78fc;
						border-radius: 2px;
						padding: 2px 4px;
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 12px;
						line-height: 14px;
						color: #4c78fc;
						text-align: center;
						margin-right: 6px;
					}
					.org-name {
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 14px;
						line-height: 20px;
						color: #1f2329;
					}
				}
				.org-id {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 14px;
					line-height: 20px;
					color: #8f959e;
				}
				&:hover {
					background: #ebf1ff;
					border: 1px solid #4c78fc;
					p {
						.label {
							background: #4c78fc;
							color: #ffffff;
						}
					}
				}
			}
		}
	}
	&-lang {
		.lang-active {
			width: 100%;
			height: 24px;
			line-height: 24px;
			color: @rok-text-color-secondary;
			font-size: 12px;
			display: inline-block;
			text-align: right;
			cursor: pointer;
			.lang-icon {
				font-size: 12px;
			}
		}
	}
	.lang-list {
		width: 116px;
		padding: 8px 0;
		background: @rok-white-bg;
		box-shadow: 0px 4px 20px rgba(106, 114, 146, 0.2);
		border-radius: 2px;
		&-item {
			display: inline-block;
			height: 32px;
			line-height: 32px;
			cursor: pointer;
			width: 100%;
			padding: 0 18px;
			&:hover {
				background: @rok-hover-color;
			}
		}
		.active {
			position: relative;
		}
		.active::after {
			content: '';
			width: 2px;
			height: 32px;
			background: @rok-primary-color;
			position: absolute;
			left: 0;
			top: 0;
		}
	}
}
</style>
